<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#app"));
	// React中的事件与原生事件的差异：
	// 1- React 事件采用的是驼峰命名
	// 2- React 事件的值必须是函数，而原生 当中必须是字符串
	let fn2 = function(){
		console.log("fn2",this);
	}
	let fn4 = ()=>console.log("fn2",this);
	root.render((
		<div>
			<button onClick={function(){
				console.log("fn1",this)
			}}>点我1</button>
			<button onClick={fn2}>点我2</button>
			<button onClick={()=>{
				console.log("fn3",this);
			}}>点我3</button>
			<button onClick={fn4}>点我4</button>
		</div>
	));
</script>
</html>